<template>
	<text :style="style">
		<slot></slot>
	</text>
</template>

<script>
	import {
		Theme
	} from "../../utils/theme/theme.js";
	import {
		Utils
	} from '../../utils/utils/utils.js';
	export default {
		name: 'lib-text',
		emit: ['onClick'],
		props: {
			// '' | 'primary' | 'danger' | 'success'
			type: {
				type: String,
				default: '',
				required: false,
			},
		},
		data() {
			return {
				componentId: Utils.getRandomChars(8),
				style: {},
			}
		},
		methods: {
			setColor() {
				if (this.type === 'primary') {
					this.style.color = Theme.theme.primary;
				}
				if (this.type === 'danger') {
					this.style.color = Theme.theme.danger;
				}
				if (this.type === 'success') {
					this.style.color = Theme.theme.success;
				}
			},
		},
		created() {
			// console.log('created');
		},
		mounted() {
			Theme.themeChange(this.componentId, () => {
				this.setColor();
			});
			this.setColor();
		},
		updated(){
			
		},
		destroyed() {
			Theme.delThemeChange(this.componentId);
		},
		unmounted() {
			Theme.delThemeChange(this.componentId);
		},
	}
</script>

<style lang="scss" scoped>
</style>